
<div>
  <div class="mb-4 flex gap-2">
    <button class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center transition-all ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm bg-transparent relative text-stone-700 hover:text-stone-700 border-stone-500 hover:bg-transparent duration-150 hover:border-stone-600 rounded-lg hover:opacity-60 hover:shadow-none">React Version</button>
    <button class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center duration-300 ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm hover:shadow-md bg-stone-800 hover:bg-stone-700 relative bg-gradient-to-b from-stone-700 to-stone-800 border-stone-900 text-stone-50 rounded-lg hover:bg-gradient-to-b hover:from-stone-800 hover:to-stone-800 hover:border-stone-900 after:absolute after:inset-0 after:rounded-[inherit] after:box-shadow after:shadow-[inset_0_1px_0px_rgba(255,255,255,0.25),inset_0_-2px_0px_rgba(0,0,0,0.35)] after:pointer-events-none transition antialiased">HTML Version</button>
    <button class="inline-flex items-center justify-center border align-middle select-none font-sans font-medium text-center transition-all ease-in disabled:opacity-50 disabled:shadow-none disabled:cursor-not-allowed focus:shadow-none text-sm py-2 px-4 shadow-sm bg-transparent relative text-stone-700 hover:text-stone-700 border-stone-500 hover:bg-transparent duration-150 hover:border-stone-600 rounded-lg hover:opacity-60 hover:shadow-none">Vue Version</button>
  </div>
  <div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
    <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind React<svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
    </button>
  </div>
  <div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
    <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind HTML<svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
    </button>
    <div class="block pb-5 text-sm text-stone-600 h-0">Material Tailwind is an open-source crafted in Tailwind CSS. Get Material Tailwind and take advantage of its free components and features that will help you set up your web project quickly.</div>
  </div>
  <div class="group block w-full items-center justify-between cursor-pointer border-b border-stone-200 aria-disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:select-none" aria-disabled="false">
    <button class="flex items-center justify-between w-full py-5 text-left font-medium dark:text-white text-stone-800">Material Tailwind Vue<svg width="1.5em" height="1.5em" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor" class="h-4 w-4 group-data-[open=true]:rotate-180"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
    </button>
  </div>
</div>
